<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <style>
    html,
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #000 !important;
    }

    input {
      outline: none;
      border: 0;
    }

    .container {
      box-sizing: border-box;

      width: 100%;
      height: auto;
      border: 10px solid #F0F2F5;
    }

    .header ul {
      background-color: #fff;
    }

    .header ul .layui-nav-bar,
    .header .layui-nav .layui-this:after {
      background-color: #2593FC;
    }

    .title {
      display: flex;
      justify-content: flex-start;
    }

    .halfL span {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #999;
      padding-bottom: 10px;
    }

    .halfL {
      width: 50%;
      box-sizing: border-box;
      padding: 10px;
      border-top: 10px solid #F0F2F5;
    }

    .grade {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;

    }

    .grade select {
      width: 120px;
    }

    .halfL p {
      text-align: center;
    }

    .halfL p strong {
      font-size: 20px;
      padding: 4px;
      color: #fff;
      background-color: royalblue;
    }

    .halfR {
      width: 50%;
      box-sizing: border-box;
      padding: 10px;
      border-left: 10px solid #F0F2F5;
      border-top: 10px solid #F0F2F5;
    }

    .spans {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #999;
      padding-bottom: 10px;
    }

    .myForm {
      margin-top: 10px;
    }

    .myForm .layui-form-pane .layui-input-inline {
      margin-right: 0;
    }

    .myForm .layui-form-pane .layui-form-label {
      width: 120px;
    }

    .build {
      margin: 40px 10px;
      border-bottom: 1px solid #999;

    }

    .build span {
      display: inline-block;
      padding-bottom: 10px;
      width: 49%;
    }

    .buildCenter {
      width: 100%;
    }

    .buildCenter span {
      display: inline-block;
      width: 49%;
      text-align: center;
      margin-top: 10px;
    }

    .myChart1 {
      width: 100%;
      height: 280px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="../../js/config.js"></script>
</head>

<body>
  <div class="container">
    <div class="box">
      <div class="header">
        <ul class="layui-nav" lay-filter="">
          <li class="layui-nav-item"><a href="javascript:;">专业概况</a></li>
          <li class="layui-nav-item layui-this"><a href="javascript:;">招生情况</a></li>
          <li class="layui-nav-item"><a href="javascript:;">师资详情</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">教学资源</a>
            <!-- <dl class="layui-nav-child">
               二级菜单 -->
            <!-- <dd><a href="">移动模块</a></dd>
              <dd><a href="">后台模版</a></dd>
              <dd><a href="">电商平台</a></dd>
            </dl> -->
          </li>
          <li class="layui-nav-item"><a href="javascript:;">教学资源</a></li>
          <li class="layui-nav-item"><a href="javascript:;">实训条件</a></li>
          <li class="layui-nav-item"><a href="javascript:;">校企合作</a></li>
          <li class="layui-nav-item"><a href="javascript:;">教学质量</a></li>
          <li class="layui-nav-item"><a href="javascript:;">就业情况</a></li>
          <li class="layui-nav-item"><a href="javascript:;">科研及社会服务</a></li>
        </ul>
      </div>
      <div class="title">
        <div class="halfL">
          <span>专业在校生人数</span>
          <div class="grade">
            <select name="" id="">
              <option value="2019">2019级</option>
              <option value="2018">2018级</option>
              <option value="2017">2017级</option>
              <option value="2016">2016级</option>
            </select>
          </div>
          <p class="totalStudents">专业在校总人数：<strong> </strong> &nbsp;人</p>
          <div class="myChart1"></div>
        </div>
        <div class="halfR">
          <div class="spans">
            <span>专业基本信息</span>
          </div>
          <span></span>
          <div class="myForm">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label sameClass">专业名称</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                      class="layui-input" value="信息技术与科学">
                  </div>
                  <label class=" layui-form-label sameClass">专业代码</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                      class="layui-input" value="123">
                  </div>
                </div>
              </div>

              <div class=" layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label sameClass">专业学制</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                      class="layui-input" value="3">
                  </div>
                  <label class=" layui-form-label sameClass">专业排名</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                      class="layui-input" value="1">
                  </div>
                </div>
              </div>

              <div class=" layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label sameClass">专业设置时间</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" value="2018-2019" autocomplete="off"
                      class="layui-input">
                  </div>
                  <label class=" layui-form-label sameClass">是否教改专业</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                      class="layui-input" value="是">
                  </div>
                </div>
              </div>

            </form>

            <!-- <script>
              //Demo
              layui.use('form', function () {
                var form = layui.form;

                //监听提交
                form.on('submit(formDemo)', function (data) {
                  layer.msg(JSON.stringify(data.field));
                  return false;
                });
              });
            </script> -->
          </div>
          <div class="build">
            <span>建设基础</span>
            <span>建设目标</span>
          </div>
          <div class="buildCenter">
            <span>暂无</span>
            <span>暂无</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

</html>
<script src=" https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="../layui/layui.all.js"></script>
<script>
  layui.use('element', function () {
    var element = layui.element;
  });
  var myChart1 = echarts.init(document.querySelectorAll('.myChart1')[0]);
  var dataStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 0,
      shadowColor: '#203665'
    }
  };

  var dataJson1 = '';
  var dataJson2 = '';

  //选择年份
  var year = 2019;
  $.ajax({
    url: $.baseUrl + '/findStudentByYear?year=' + year,
    type: 'get',
    success: function (res) {
      console.log(res.data);
      //学生总数
      var total = res.data;
      var totalStudent = 0;
      for (let i = 0; i < total.length; i++) {
        totalStudent += parseFloat(total[i].studentName);
        if (res.data[i].gender == '男') {
          console.log(res.data[i].studentName, '男');
          dataJson1 = res.data[i].studentName;
        } else if (res.data[i].gender == '女') {
          console.log(res.data[i].studentName, '女');
          dataJson2 = res.data[i].studentName;

        }
      }
      console.log(totalStudent);
      var manStudent = totalStudent - dataJson1;
      var womanStudent = totalStudent - dataJson2;
      $('.totalStudents').children('strong').html(totalStudent)
      dataJson1 = res.data[0].studentName;
      // console.log(dataJson1);
      dataJson2 = res.data[1].studentName;
      console.log(dataJson2);

      console.log(dataJson1);
      console.log(totalStudent);
      option1 = {
        backgroundColor: "#fff",
        series: [{
          name: '第一个圆环',
          type: 'pie',
          clockWise: false,
          radius: [70, 80],
          itemStyle: dataStyle,
          hoverAnimation: false,
          center: ['30%', '50%'],
          data: [{
            value: dataJson1,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#000',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: "bold"
                  },
                  b: {
                    color: '#000',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  var percent = (params.value / totalStudent) * 100 + "%";
                  console.log(percent);

                  return "{b|男}\n\n" + "{a|人数：" + params.value + "个}" + "\n\n{b|占比：" + percent + "}";
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#2593FC',
                // shadowColor: '#2593FC',
                shadowBlur: 0
              }
            }
          },
          {
            value: manStudent,
            name: 'invisible',
            itemStyle: {
              // radius: [75, 76],

              normal: {
                color: 'lightblue'
              },
              emphasis: {
                color: 'lightblue'
              }
            }
          }]
        }, {
          name: '第二个圆环',
          type: 'pie',
          clockWise: false,
          radius: [70, 80],
          itemStyle: dataStyle,
          hoverAnimation: false,
          center: ['70%', '50%'],
          data: [{
            value: dataJson2,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#000',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: "bold"
                  },
                  b: {
                    color: '#000',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  console.log(params.value);

                  var percent = (params.value / totalStudent) * 100 + "%";

                  return "{b|女}\n\n" + "{a|人数：" + params.value + "个}" + "\n\n{b|占比：" + percent + "}";
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#27C2C1',
                shadowColor: '#27C2C1',
                shadowBlur: 0
              }
            }
          }, {
            value: womanStudent,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: 'lightyellow',
              },
              emphasis: {
                color: 'lightyellow'
              }
            }
          }]
        }]
      }

      myChart1.setOption(option1)
    },
    error: function () {
      alert('出错了')
    }
  })
  $('.grade').children('select').on('change', function () {

    $(this).val = $(this).find('option').val();
    var year = $(this).val();
    console.log(year);

    //掉后台接口
    $.ajax({
      url: $.baseUrl + '/findStudentByYear?year=' + year,
      type: 'get',
      success: function (res) {
        console.log(res.data);
        var total = res.data;
        var totalStudent = 0;
        for (let i = 0; i < total.length; i++) {
          totalStudent += parseFloat(total[i].studentName);
          if (res.data[i].gender == '男') {
            console.log(res.data[i].studentName, '男');
            dataJson1 = res.data[i].studentName;
          } else if (res.data[i].gender == '女') {
            console.log(res.data[i].studentName, '女');
            dataJson2 = res.data[i].studentName;

          }
        }

        $('.totalStudents').children('strong').html(totalStudent)

        option1 = {
          backgroundColor: "#fff",
          series: [{
            name: '第一个圆环',
            type: 'pie',
            clockWise: false,
            radius: [70, 80],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['30%', '50%'],
            data: [{
              value: dataJson1,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: '#000',
                      align: 'center',
                      fontSize: 20,
                      fontWeight: "bold"
                    },
                    b: {
                      color: '#000',
                      align: 'center',
                      fontSize: 16
                    }
                  },
                  formatter: function (params) {
                    var division = params.value / totalStudent;
                    division = division.toFixed(4);
                    console.log(division);

                    var percent = division * 100 + "%";
                    console.log(percent);
                    return "{b|男}\n\n" + "{a|人数：" + params.value + "个}" + "\n\n{b|占比：" + percent + "}";
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#2593FC',
                  shadowColor: '#2593FC',
                  shadowBlur: 0
                }
              }
            }, {
              value: manStudent,
              name: 'invisible',
              itemStyle: {
                // radius: [75, 76],

                normal: {
                  color: 'lightblue'
                },
                emphasis: {
                  color: 'lightblue'
                }
              }
            }]
          }, {
            name: '第二个圆环',
            type: 'pie',
            clockWise: false,
            radius: [70, 80],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['70%', '50%'],
            data: [{
              value: dataJson2,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: '#000',
                      align: 'center',
                      fontSize: 20,
                      fontWeight: "bold"
                    },
                    b: {
                      color: '#000',
                      align: 'center',
                      fontSize: 16
                    }
                  },
                  formatter: function (params) {
                    var division = params.value / totalStudent;
                    division = division.toFixed(4);

                    var percent = division * 100 + "%";
                    console.log(percent);

                    return "{b|女}\n\n" + "{a|人数：" + params.value + "个}" + "\n\n{b|占比：" + percent + "}";
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: 'lightyellow',
                  shadowColor: 'lightyellow',
                  shadowBlur: 0
                }
              }
            }, {
              value: womanStudent,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#27C2C1',
                  radius: [75, 76]
                },
                emphasis: {
                  color: '#27C2C1'
                }
              }
            }]
          }]
        }

        myChart1.setOption(option1)
      },
      error: function () {
        alert('出错了')
      }
    })
  });

  // function echarts1() {


  // }

</script>